<template>
  <div class="title-card">
    <div class="firstCard"
         v-if="type === 'firstCard'">
      <div class="wrap">
        <div v-if="isSwitch"
             class="titles-wrap">
          <span class="titles-item"
                :class="{ active: selectedLabel === item.id }"
                v-for="item in titles"
                :key="item.name"
                @click="switchHandle(item)">{{ item.name }}</span>
        </div>
        <div v-else
             class="title">
          <!-- <div class="titleLine"></div> -->
          <div class="name">{{ title }}</div>
        </div>
        <slot name="rightOperation"></slot>
      </div>
    </div>
    <div class="secondCard"
         v-if="type === 'secondCard'">
      <div class="wrap">
        <div v-if="isSwitch"
             class="titles-wrap">
          <span class="titles-item"
                :class="{ active: selectedLabel === item.id }"
                v-for="item in titles"
                :key="item.name"
                @click="switchHandle(item)">{{ item.name }}</span>
        </div>
        <div v-else
             class="title">{{ title }}</div>
        <div class="more"
             v-if="showMore"
             @click="moreClick">
          {{ moreText }}
          <a-icon type="double-right" />
        </div>
        <slot name="rightOperation"></slot>
      </div>
      <div class="bottom-line">
        <span class="right"></span>
      </div>
    </div>
    <div class="threeCard"
         v-if="type === 'threeCard'">
      <div class="wrap">
        <div v-if="isSwitch"
             class="titles-wrap">
          <span class="titles-item"
                :class="{ active: selectedLabel === item.key }"
                v-for="item in titles"
                :key="item.name"
                @click="switchHandle(item)">{{ item.name }}</span>
        </div>
        <div v-else
             class="title">{{ title }}</div>
        <div class="more"
             v-if="showMore"
             @click="moreClick">
          {{ moreText }}
          <a-icon type="double-right" />
        </div>
        <slot name="rightOperation"></slot>
      </div>
      <div class="bottom-line">
        <span class="right"></span>
      </div>
    </div>
    
    <div class="line-name-line"
         v-if="type === 'line-name-line'">
      <div class="wrap">
        <div v-if="isSwitch"
             class="titles-wrap">
          <span class="titles-item"
                :class="{ active: selectedLabel === item.id }"
                v-for="item in titles"
                :key="item.name"
                @click="switchHandle(item)">{{ item.name }}</span>
        </div>
        <div v-else
             class="title">
          <div class="titleLine titleLineOne">
            <img src="../../assets/images/titleLeft.png" alt="">
          </div>
          <div class="name">{{ title }}</div>
          <div class="titleLine titleLineTwo">
            <img src="../../assets/images/titleRight.png" alt="">
          </div>
        </div>
        <slot name="rightOperation"></slot>
      </div>
    </div>
    <Tabs :tabList="tabList"
          @selectTab="selectTab"
          :selectedIndx="selectedIndx"
          v-if="isTabs"></Tabs>
    <div class="spanning-wrap"
         v-if="loading">
      <a-spin class="spin-item"
              :spinning="loading" />
    </div>
    <Empty v-if="isEmpty"></Empty>
    <!-- 卡片内容 -->
    <slot v-if="!isEmpty && !loading"></slot>
    <div class="moreText"
         v-if="showMore && type === 'firstCard'"
         @click="moreClick">
      <div class="text"
           v-if="showMore">查看更多</div>
    </div>
    <div class="line-name-line-more-wrap"
         v-if="showMore && type === 'line-name-line'">
      <span class="text"
            @click="moreClick">
        查看更多
        <a-icon class="title-custom-icon"
                type="swap-right"></a-icon>
      </span>
    </div>
  </div>
</template>

<script>
import Empty from './Empty'
import Tabs from '@/components/tabs'
export default {
  props: {
    isSwitch: {
      // 切换模式
      type: Boolean,
      default: () => false,
    },
    moreText: {
      type: String,
      default: () => '更多',
    },
    selectedLabel: String,
    title: {
      type: String,
      default: () => '我是标题',
    },
    titles: {
      type: Array,
      default: () => [],
    },
    showMore: {
      type: Boolean,
      default: () => true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    isEmpty: {
      type: Boolean,
      default: () => false,
    },
    type: {
      type: String,
      default: 'secondCard',
    },
    tabList: Array, // tab栏数据
    selectedIndx: Number, // tab栏切换的下标
    isTabs: {
      type: Boolean,
      default: false,
    }, //是否显示tab栏
  },
  components: {
    Empty,
    Tabs,
  },
  data() {
    return {
      moreClickStstus: false,
    }
  },
  methods: {
    moreClick() {
      this.moreClickStstus = !this.moreClickStstus
      this.$emit('moreClick', this.moreClickStstus)
    },
    switchHandle(item) {
      this.$emit('switchTitle', item)
    },
    selectTab(val) {
      this.$emit('selectTab', val)
    },
  },
}
</script>

